<template>
	<view class="my-wrap">
		<view class="my-desc-wrap padding-sm">
			<view class="desc-cont" v-if="homeInfo.nickname">
				<view class="desc-cont-avatar">
					<image :src="homeInfo.avatar"/>
				</view>
				<view class="desc-cont-info">
					<view class="left">
						<view>
							<text class="text-1">{{homeInfo.nickname}}</text>
						</view>
						<view>
							<text class="text-2">{{homeInfo.fans_count}}粉丝</text>
							<text class="text-2 margin-lr-sm">{{homeInfo.likes_count}}获赞</text>
							<text class="text-2">{{homeInfo.videos_sum}}播放量</text>
						</view>
					</view>
					<view class="right" v-if="userInfo.id!==homeInfo.id">
						<button class="cu-btn round custom-btn-follow" :class="{'active':homeInfo.attention === 0}" :loading="attentionLoading">
							<view v-if="homeInfo.attention === 0" @click="handleAttention">
								<text class="cuIcon-add margin-right-xs"></text>关注
							</view>
							<view v-else @click="handleUnAttention">取消关注</view>
						</button>
					</view>
				</view>
			</view>
			<view class="desc-sign padding-top-sm" v-if="homeInfo.about_me">
				{{homeInfo.about_me}}
			</view>
		</view>
		<view class="page-share">
			<!-- 导航栏 开始 -->
			<view class="page-tab">
				<tab-nav :tab-cur="TabCur" :tab-list="tabList" :is-show-menu="false" @tabSelect="tabSelect" :cus-padding="32"></tab-nav>
			</view>
			<!-- 导航栏 结束 -->

			<!-- 内容 开始 -->
			<scroll-view scroll-y="true" @scroll="scrolltolower" class="tab-cont">
				<!-- 直播 开始 -->
				<view class="cu-card custom-card-live grid col-2 padding-lr-xs" v-if="TabCur!==3">
					<block v-for="(item,index) of list" :key="index">
						<view class="content-list padding-lr-xs padding-bottom-sm" @click="showDetail(item)">
							<view class="content-item bg-white">
								<view class="img-box-bg">
									<image :src="item.img" mode="aspectFill" style="height:100%" />
								</view>
								<view class="bg-shadeTop custom padding-lr-sm padding-top padding-bottom-xl flex text-xs">
									<view>
										<view v-if="TabCur===0">
											<text class="cuIcon cuIcon-all" />
											<text class="margin-left-xs">
												直播中 1233人观看
											</text>
										</view>
										<view v-else-if="TabCur===1">
											<text class="cuIcon cuIcon-all" />
											<text class="margin-left-xs">
												{{item.starttime_man}}
											</text>
										</view>
										<view v-else-if="TabCur===2">
											<text class="cuIcon cuIcon-all" />
											<text class="margin-left-xs">
												已结束 查看回放
											</text>
										</view>
									</view>
								</view>
								<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
									<view class="text-sm text-cut" style="min-width: 0;">{{item.title}}</view>
									<view class="flex justify-between align-center margin-top-sm text-xs">
										<view class="flex justify-start align-center">
											<image class="cu-avatar custom round margin-right-xs" :src="item.avatar" />
											<view>{{item.nickname}}</view>
										</view>
										<view class="flex justify-start align-center">
											<view></view>
											<view class="margin-left-xs">{{item.view_num}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 直播 结束 -->
				<view v-if="TabCur===3" class="padding-lr-sm">
					<video-list :list="list" :videoStyle="videoStyle" />
				</view>
			</scroll-view>
			<!-- 内容 结束 -->
		</view>
	</view>
</template>

<script>
	import tabNav from '@/components/TabNav'
	import VideoList from '@/pages/video/components/VideoList'
	export default {
		components: {
			tabNav,
			VideoList
		},
		data() {
			return {
				homeInfo: {},
				list: [],
				listUnStart:{
					total:0
				},
				listNow:{
					total:0
				},
				listEnd:{
					total:0
				},
				videoData:{
					total:0
				},
				TabCur: 0,
				index: 0,
				videoStyle: {
					padding: '25rpx',
					borderRadius: '10rpx'
				},
				attentionLoading: false,
				query: {
					page: 1,
					size: 10,
					id: "",
					lives_type:""
				},
				isMore:true
			};
		},
		computed: {
			tabList() {
				return [`正在播${this.listNow.total}`, `预告${this.listUnStart.total}`, `回放${this.listEnd.total}`,
					`视频${this.videoData.total}`
				]
			},
		},
		methods: {
			async getHomeInfo(id) {
				if (id) {
					let query = {
						id
					}
					let {
						data
					} = await this.$h.api.userModel.getUserHome(query)
					return data[0]
				}
			},
			async getVideoList() {
				let {lives_type,...query}=this.query
				let {
					data
				} = await this.$h.api.userModel.getUserVideos(query)
				this.isMore=data.data.length===query.size
				return data
			},
			async getLiveList(index) {
				let lives_type = 0
				switch (index) {
					case 0:
						lives_type = 2;
						break;
					case 1:
						lives_type = 1;
						break;
					case 2:
						lives_type = 3;
						break;
					default:
						""
				}
				this.query.lives_type=lives_type
				let query=this.$h.utils.deepClone(this.query)
				let {
					data
				} = await this.$h.api.userModel.getUserLives(query)
				this.isMore=data.data.length===query.size
				return data
			},
			async handleAttention() {
				this.attentionLoading = true
				let query = {
					attention_user_id: this.homeInfo.id
				}
				let {
					code
				} = await this.$h.api.userModel.postLike(query)
				if (code === 1) {
					this.attentionLoading = false
					this.$set(this.homeInfo, 'attention', 1)
				}
			},
			async handleUnAttention() {
				this.attentionLoading = true
				let query = {
					attention_user_id: this.homeInfo.id
				}
				let {
					code
				} = await this.$h.api.userModel.postUnLike(query)
				if (code === 1) {
					this.attentionLoading = false
					this.$set(this.homeInfo, 'attention', 0)
				}
			},
			async tabSelect(index) {
				this.query.page=1
				switch (index) {
					case 0:
						this.listNow = await this.getLiveList(0)
						this.list = this.listNow.data;
						this.TabCur = index
						break;
					case 1:
						this.listUnStart = await this.getLiveList(1)
						this.list = this.listUnStart.data;
						this.TabCur = index
						break;
					case 2:
						this.listEnd = await this.getLiveList(2);
						this.list = this.listEnd.data
						this.TabCur = index
						break;
					case 3:
						this.videoData=await this.getVideoList()
						this.list=this.videoData.data
						this.TabCur = index
						break;
					default:
						""
				}
			},
			async showDetail(item) {
				switch (this.TabCur) {
					case 0:
						if(this.userInfo.id===item.user_id){
							this.$h.router.push({
								path: '/pages/publish/liveInfo/liveInfo',
								params: {
									state: 2
								}
							})
						}else{
							this.$h.router.push({
								path:"/pages/live/liveDetail",
								params:{
									id:item.id,
									room_id:item.room_id
								}
							})
						}
						break;
					case 1:
						break;
					case 2:
						this.$h.router.push({
							path: '/pages/video/videoReplay/videoReplay',
							params:{
								id:item.replays[0].id
							}
						});//回放
						break;
					default:
						""
				}
			},
			async scrolltolower(){
				if(this.isMore){
					if(this.TabCur<3){
						this.query.page++
						let data=await this.getLiveList(this.TabCur)
						this.list=[...this.list,...data.data]
					}else{
						this.query.page++
						let list=await this.getVideoList()
						this.videoList=[...this.videoList,...list]
					}
				}
			},
		},
		async onLoad({
			id
		}) {
			if (!id) {
				let {
					data
				} = await this.$h.api.userModel.getMyPage()
				id = data.id
			}
			this.getHomeInfo(id).then(info => {
				this.homeInfo = info
				this.query.id=info.id
				this.$h.showLoading()
				Promise.all([this.getLiveList(0), this.getLiveList(1), this.getLiveList(2), this.getVideoList()]).then(res => {
					this.$h.hideLoading()
					this.listNow = res[0]
					this.listUnStart = res[1]
					this.listEnd = res[2]
					this.videoData = res[3]
					this.list = this.listNow.data
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-wrap {
		height: 100vh;
		background-color: #fff;
		position: relative;

		.my-desc-wrap {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;

			.desc-cont {
				display: flex;
				justify-content: space-between;

				.desc-cont-avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.desc-cont-info {
					height: 100rpx;
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 20rpx;
					color: "#3A3A3C";

					.left {
						.text-1 {
							font-size: 28rpx;
						}

						.text-2 {
							font-size: 24rpx;
						}
					}
				}
			}

			.desc-sign {
				flex: 1;
				font-size: 26rpx;
			}
		}

		.page-share {
			height: calc(100vh - 300rpx);

			.cu-card {
				padding-top: 20rpx;

				.cu-item.custom-margin {
					margin: 20rpx;
					overflow: hidden;
				}
			}

			.content-list {
				height: 520rpx;

				.content-item {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
					overflow: hidden;
					position: relative;

					.cu-avatar.custom {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.tab-cont {
				height: calc(100% - 90rpx);
				padding-top: 40rpx;
				box-sizing: border-box;
				background: rgba(237, 237, 237, 1);
			}
		}
	}
</style>
